import React from 'react';

import classNames from 'clsx';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';

/**
 * SimpleScrollbar 组件
 * 封装 simplebar-react，实现自定义滚动条的通用容器
 * @param props.children 需要滚动显示的内容
 * @param props.className 可选，附加的自定义样式类
 */
export interface SimpleScrollbarProps {
	/**
	 * 需要滚动显示的内容
	 */
	readonly children: React.ReactNode;
	/**
	 * 可选，附加的自定义样式类
	 */
	readonly className?: string;
}

/**
 * SimpleScrollbar 组件，提供美观的滚动条封装
 * @param children 需要滚动显示的内容
 * @param className 可选，附加的自定义样式类
 */
const SimpleScrollbar: React.FC<SimpleScrollbarProps> = ({ children, className }) => {
	return (
		<div className={classNames('h-full flex-1-hidden', className)}>
			{/* 使用 SimpleBar 实现自定义滚动条 */}
			<SimpleBar className="h-full">{children}</SimpleBar>
		</div>
	);
};

export default SimpleScrollbar;
